@import (reference) "@{cosyless}";
/*-----------------------------------------------------------------------------------------
    按钮通用设置
    size                        color                    radius
    btn-tiny     -- 特小号   |   btn-blue    -- 蓝色   |   btn-rounded   -- 圆角(5px)
    btn-small    -- 小号     |   btn-red     -- 红色   |   btn-pill      -- 圆角(高圆)
    btn-action   -- 正常     |   btn-white   -- 白色   |   btn-box       -- 圆角(10px)
    btn-large    -- 大号     |   btn-green   -- 绿色   |   btn-circle    -- 全圆(50%)
    btn-jumbo    -- 巨大号   |   btn-purple  -- 紫色   |
    btn-giant    -- 特大号   |   btn-yellow  -- 黄色   |
------------------------------------------------------------------------------------------*/
.btn{
    color: #666;
    background-color: #eee;
    font-weight: 300;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    margin: 0;
    display: inline-block;
    appearance: none;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition-property: all;
    transition-duration: .3s;

    &:visited{//点后
        color: #666;
    }
    &:hover,&:focus{//放上去效果
        background-color:#f6f6f6;
        text-decoration: none;
        outline:none;
    }
    &:active,&.active,&.is-active{
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
        text-decoration: none;
        background-color: #eee;
        border-color: #cfcfcf;
        color: #d4d4d4;
        transition-duration: 0s;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    &:disabled,&.disabled,&.is-disabled{
        background: #eee !important;
        border: 1px solid #DDD !important;
        text-shadow: 0 1px 1px white !important;
        color: #ccc !important;
        cursor: default !important;
        appearance: none !important;
        box-shadow: none !important;
        opacity: .8 !important;
    }

    /*size*/
    &-tiny{
        line-height:24px;
        font-size: 12px;
        padding: 0 12px;
    }
    &-small{
        line-height:30px;
        font-size: 12px;
        padding: 0 15px;
    }
    &-action{
        line-height:35px;
        font-size: 14px;
        padding: 0 20px;
    }
    &-large{
        line-height:40px;
        font-size: 16px;
        padding: 0 25px;
    }
    &-jumbo{
        line-height:45px;
        font-size: 18px;
        padding: 0 30px;
    }
    &-giant{
        line-height:50px;
        font-size: 20px;
        padding: 0 35px;
    }
    /*color*/
    &-blue{
        background-color:#1b9af7;
        color: #fff;
        &:visited{
            color: #fff;
        }
        &:hover,&:focus{
            background-color: #4cb0f9;
        }
        &:active,&.active,&.is-active{
            background-color: #2798eb;
            color: #0880d7;
        }
    }
    &-red{
        background-color:#ff4351;
        color: #fff;
        &:visited{
            color: #fff;
        }
        &:hover,&:focus{
            background-color: #ff7680;
        }
        &:active,&.active,&.is-active{
            background-color: #f64c59;
            color: #ff1022;
        }
    }
    &-green{
        background-color:#a5de37;
        color: #fff;
        &:visited{
            color: #fff;
        }
        &:hover,&:focus{
            background-color: #b9e563;
        }
        &:active,&.active,&.is-active{
            background-color: #a1d243;
            color: #8bc220;
        }
    }
    &-white{
        background-color:#fff;
        color: #666;
    }
    &-purple{
        background-color:#7b72e9;
        color: #fff;
        &:visited{
            color: #fff;
        }
        &:hover,&:focus{
            background-color: #a49ef0;
        }
        &:active,&.active,&.is-active{
            background-color: #827ae1;
            color: #5246e2;
        }
    }
    &-yellow{
        background-color:#feae1b;
        color: #fff;
        &:visited{
            color: #fff;
        }
        &:hover,&:focus{
            background-color: #fec04e;
        }
        &:active,&.active,&.is-active{
            background-color: #f3ab26;
            color: #e59501;
        }
    }
    /*radius*/
    &-rounded{
        border-radius:5px;
    }
    &-box{
        border-radius:10px;
    }
    &-pill{
        border-radius:200px;
    }
    &-circle{
        text-align: center;
        border-radius: 50%;
        &.btn-tiny{
            width: 24px;
            padding: 0;
        }
        &.btn-small{
            width: 30px;
            padding: 0;
        }
        &.btn-tiny{
            width: 24px;
            padding: 0;
        }
        &.btn-action{
            width: 35px;
            padding: 0;
        }
        &.btn-large{
            width: 40px;
            padding: 0;
        }
        &.btn-jumbo{
            width: 45px;
            padding: 0;
        }
        &.btn-giant{
            width: 50px;
            padding: 0;
        }
    }

}


